<script>
import requestUtil from "@/utils/RequestUtil";
import {Toast} from "vant";
import {mapGetters, mapMutations} from "vuex";

export default {
  name: "PublicLogin",
  data() {
    return {
      username: 'jzy',
      password: '123456',
    }
  },
  methods: {
    ...mapGetters([
      'getUserInfo'
    ]),
    ...mapMutations([
      'setUserInfo'
    ]),
    init() {
      let token = this.getUserInfo().token
      if (token) {
        this.$router.push({name: 'index'})
      }
    },
    login() {
      const toast = Toast({
        type: 'loading',
        duration: 0,
        forbidClick: true,
        message: '正在登录...'
      })
      requestUtil({
        method: "POST",
        url: "/user/login",
        data: {
          username: this.username,
          password: this.password
        }
      }).then(res => {
        if (res.data.code === 1) {
          toast.type = "success"
          this.setUserInfo({
            token: res.data.data.token,
            username: res.data.data.user,
            power: res.data.data.power,
            id: res.data.data.id,
            img: res.data.data.img
          })
          this.$router.push({name: 'my'})
        } else {
          toast.type = 'fail'
          toast.message = res.data.msg
        }
      }).catch(() => {
        toast.type = 'fail'
        toast.message = '登录失败，请重试'
      }).finally(() => {
        setTimeout(() => {
          toast.clear()
        }, 1000)
      })
    },
    usernameValidate(val) {
      return /[A-Za-z0-9]{3,}/.test(val)
    },
    passwordValidate(val) {
      return /[A-Za-z0-9]{6,18}/.test(val)
    }
  },
  mounted() {
    this.init()
  }
}
</script>

<template>
  <div style="width: 100%;margin-top: -30px">
    <div style="font-size: 66px;color: #f8f8f8;position: relative;left: -8px">LOGIN</div>
    <div
        style="font-size: 24px;color: #555;text-shadow: 1px 0 1px rgb(0,0,0,0.3);position: relative;z-index: 1;top: -40px;margin-left: 35px">
      欢迎回来！
    </div>
    <van-form style="padding: 0 33px;" validate-first @submit="login">
      <div
          style="justify-content: center;border-radius: 5px;background-color: rgb(248,246,252);position: relative;display: flex;height: 70px;flex-direction: column;padding: 3px 10px">
        <span style="color: #606266;font-size: 14px">用户名</span>
        <van-field v-model="username"
                   :rules="[{validator: usernameValidate,message: '请输入A-z0-9的字符且最少为6位'}]"
                   placeholder="请输入用户名"
                   style="flex: 1;margin-top: 20px;border: none;background-color: transparent"/>
      </div>
      <div
          style="border-radius: 5px;background-color: rgb(248,246,252);position: relative;display: flex;height: 70px;flex-direction: column;justify-content: center;padding: 3px 10px;margin-top: 20px">
        <span style="color: #606266;font-size: 14px">密码</span>
        <van-field v-model="password"
                   :rules="[{validator: passwordValidate,message: '请提示输入6-18位不含特殊字符的数字、字母组合'}]"
                   placeholder="6-18位不含特殊字符的数字、字母组合"
                   style="flex: 1;margin-top: 20px;border: none;background-color: transparent"/>
      </div>
      <div style="padding: 0 50px;margin-top: 20px">
        <van-button style="width: 100%;border-radius: 20px" type="primary">登录</van-button>
        <van-button native-type="button" style="width: 100%;border-radius: 20px;margin-top: 10px"
                    type="danger" @click="$router.push({name: 'register'})">注册
        </van-button>
      </div>
    </van-form>
  </div>
</template>

<style scoped>
:deep(.van-cell.van-field) {
  padding: 0;
  flex: none !important;
  margin-top: 0 !important;
}
</style>